import React, { useEffect, useState } from 'react'
import { Button, Descriptions, PageHeader } from 'antd';
import moment from 'moment'
import axios from 'axios';
export default function NewPreview(props) {
    const [previewInfo, setpreviewInfo] = useState(null)
    useEffect(() => {
        axios.get(`/news/${props.match.params.id}?_expand=category&_expand=role`).then(res => {
            setpreviewInfo(res.data)
        })
    }, [props.match.params.id])

    const auditList = ['未审核', '审核中', '已通过', '未通过']
    const publishList = ['未发布', '待发布', '已上线', '已下线']
    const colorList = ['black', 'orange', 'green', 'red']
    return (
        <div>
            {
                previewInfo && <div>
                    <PageHeader
                        ghost={false}
                        onBack={() => window.history.back()}
                        title={previewInfo?.title}
                        subTitle={previewInfo.category.title}
                    >
                        <Descriptions size="small" column={3}>
                            <Descriptions.Item label="创建者：">{previewInfo.author}</Descriptions.Item>
                            <Descriptions.Item label="创建时间：">
                                <a>{moment(previewInfo.createTime).format('YYYY/MM/DD HH:MM:SS')}</a>
                            </Descriptions.Item>
                            <Descriptions.Item label="发布时间：">{previewInfo.publishTime ? moment(previewInfo.publishTime).format('YYYY/MM/DD HH:MM:SS') : '-'}</Descriptions.Item>
                            <Descriptions.Item label="区域：">{previewInfo.region}</Descriptions.Item>
                            <Descriptions.Item label="审核状态：" contentStyle={{ color: colorList[previewInfo.auditState] }}>
                                {auditList[previewInfo.auditState]}
                            </Descriptions.Item>
                            <Descriptions.Item label="发布状态：" contentStyle={{ color: colorList[previewInfo.publishState] }}>
                                {publishList[previewInfo.publishState]}
                            </Descriptions.Item>
                            <Descriptions.Item label="访问数量：">
                                {previewInfo.view}
                            </Descriptions.Item>
                            <Descriptions.Item label="点赞数量：">
                                {previewInfo.star}
                            </Descriptions.Item>
                            <Descriptions.Item label="评论数量：">
                                0
                            </Descriptions.Item>
                        </Descriptions>
                    </PageHeader>
                    <div dangerouslySetInnerHTML={{
                        __html: previewInfo.content
                    }}
                        style={{ borderTop: '1px solid gray' }}
                    >
                    </div>
                </div>
            }
        </div>
    )
}
